<template>
  <div>
    <ul>
      <li @mouseenter="show(index)" @mouseleave="hide(index)" v-for='(item, index) in filterData' :key='item.key' @click.stop="handleClick(item)">
        <span  @click='expandNode(item.node)' class='di-tree' v-show='item.parent==undefined || item.parent.expanded==undefined || item.parent.expanded==true'>
          <span :style="{'padding-left': width*item.level+10+'px'}">{{ item.node.title }}
          </span>
          <span v-show="button">
            <span v-if="index == showIndex">
              <button class="di-button" ><span>edit</span></button>
              <button class="di-button" @="remove(node)"><span>delete</span></button>
            </span>
          </span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  var ergodic = function (val, array1, level, parent) {
    for (let i = 0; i < val.length; i++) {
      array1.push({ node: val[i], level: level, parent: parent })
      if (val[i].children) {
        ergodic(val[i].children, array1, level + 1, val[i])
      }
    }
  }
  var pushNode = function (arr1, node, filterData) {
    // rgodic(items.parent, this.arrp, 0)
    if (node.parent !== undefined) {
      arr1.forEach(item => {
        if (item.node === node.parent) {
          if (filterData.indexOf(item) === -1) {
            pushNode(arr1, item, filterData)
            filterData.splice(filterData.length - 1, 0, item)
          }
        }
      })
    }
  }
  export default {
    props: {
      button: Boolean,
      data: Array,
      filterKey: String
    },
    data () {
      return {
        width: 18,
        arr1: [],
        arrp: [],
        buttonlist: false,
        showIndex: -1
      }
    },
    mounted () {
      console.log(this.data, 'tttt')
      ergodic(this.data, this.arr1, 0)
      if (this.button) {
      }
    },
    computed: {
      filterData () {
        const filterKey = this.filterKey && this.filterKey.toLowerCase()
        if (filterKey) {
          let filterData = []
          this.arr1.forEach(items => {
            items.node.expanded = true //  展开搜索
            console.log(items.node.title, 'title')
            var convert = require('convert-chinese-to-pinyin')
            console.log(convert(items.node.title), 'rer')
            if (items.node.title.includes(filterKey) || convert(items.node.title).toLowerCase().includes(filterKey)) {
              filterData.push(items)
              pushNode(this.arr1, items, filterData) // 三个参数 ，所有的节点，当前过滤通过的节点，过滤后的数组 从所有的节点中查找当前节点父节点然后插入到当前节点的前边
              console.log('过滤的节点所有对象', filterData[items.level])
            }
          })
          console.log(filterData, 'arr1')
          return filterData
        } else {
          console.log(this.arr1, 'arrr 1')
          return this.arr1
        }
      }
    },
    watch: {
      data (val) {
        console.log('he', this.data)
      },
      buttonlist (val) {
        console.log('r', this.buttonlist)
      },
//      filterKey (val) {
//        console.log('哟', this.data)
//      },
      arr1 (val) {
        console.log(this.arr1, '数组发生改变了')
      }
    },
    methods: {
      show: function (node) {
        console.log('jieidna', node)
        this.showIndex = node
      },
      hide: function (node) {
        this.showIndex = -1
      },
      initTree () {
        for (let node of this.data) {
          this.$set(node, 'parent', this.parent)
        }
      },
      //  节点点击事件
      handleClick (item) {
        this.$emit('node-click', item.node)
      },
      isLeaf (node) {
        console.log(node, 'node')
        console.log(this.parent, 'parent')
        console.log(node.children + node.parent + node.children, 'rwerw')
        return !node.children && node.parent
      },
      //  关闭打开节点
      expandNode (node, expanded) {
        if (expanded === undefined) {
          this.$set(node, 'expanded', !node.expanded)
        } else { this.$set(node, 'expanded', expanded) }
        if (node.children) {
          for (let i = 0; i < node.children.length; i++) {
            this.expandNode(node.children[i], node.expanded)
          }
        }
        // this.$emit('node-expanded', node)
      },
      nodeExpanded (node) {
        this.$emit('node-expanded', node)
      },
      addNode () {
        console.log(this.data, 'this.data')
        this.data.children.push({ title: '新节点' })
      },
      editNode () {},
      removeNode (node) {
        this.$emit('removeChildNode', node)
      },
      removeChildNode (node) {
        this.data.children.splice(this.children.indexOf(node), 1)
      }
    }
  }
</script>
<style>
  ul li {
    list-style: none;
  }
  .di-tree {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    height: 26px;
    cursor: pointer;
  }
  .di-tree:hover {
    background-color: #f5f7fa
  }
  .di-button{
    border-color: transparent;
    color: #409eff;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
  }
</style>
